<template>
  <div class="content">
    <div id="main" style="height: 700px; width: 1000px"></div>
  </div>
</template>
<script setup>
import axios from "axios";
import * as echarts from "echarts";
import { onMounted, onUpdated, reactive } from "vue";
const shuju = reactive({
  data: [40, 50, 60, 30, 20, 55, 80, 150, 210],
});
var dataName = [];
var dataValue = [];
// 基本柱形图
const change = () => {
  const chartBox = echarts.init(document.getElementById("main")); // 主要
  const data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  const option = {
    xAxis: {
      max: "200",
    },
    yAxis: {
      type: "category",
      data: dataName,
      inverse: true,
      animationDuration: 500,
      animationDurationUpdate: 500,
      max: 8,
    },
    visualMap: {
      orient: "horizontal",
      left: "center",
      min: 10,
      max: 200,
      text: ["最多人参与", "最少人参与"],
      dimension: 0,
      inRange: {
        color: ["#65B581", "#FFCE34", "#FD665F"],
      },
    },
    series: [
      {
        realtimeSort: true,
        name: "投票榜前8",
        type: "bar",
        data: data,
        label: {
          show: true,
          position: "right",
          valueAnimation: true,
        },
      },
    ],
    legend: {
      show: true,
    },
    animationDuration: 0,
    animationDurationUpdate: 2000,
    animationEasing: "linear",
    animationEasingUpdate: "linear",
  };
  function run() {
    for (var j = 0; j < dataValue.length; j++) {
      console.log(j);
      for (var i = 0; i <= dataValue[j]; i++) {
        if (data[j] < i) {
          data[j] += 1;
        }
      }
    }
    chartBox.setOption({
      series: [
        {
          type: "bar",
          data,
        },
      ],
    });
  }
  setTimeout(function () {
    run();
  }, 300);

  // 根据页面大小自动响应图表大小
  option && chartBox.setOption(option);
};
onMounted(() => {
  getVoteRanking();
});
onUpdated(() => {
  getVoteRanking();
});
const getVoteRanking = () => {
  axios.get("/vote/getVoteRanking").then((res) => {
    dataName = res.data.data.nameList;
    dataValue = res.data.data.value;
    console.log(res.data.data);
    change();
  });
};
</script>
<style scoped>
.content {
  margin: 0 auto;
  width: 1000px;
}
</style>
